[功能] 使用云存储资源

在微信小程序中，你可以直接播放存储在云存储中的音频文件。这可以通过 <audio> 组件或 wx.createInnerAudioContext() 来实现。以下是具体的步骤和示例代码。

1. 上传音频文件到云存储

首先，你需要将音频文件上传到云存储。假设你已经有一个音频文件并已上传到云存储，并且知道它的 fileID 或 URL。

2. 使用 <audio> 组件播放音频

WXML 文件

<!-- pages/audio/audio.wxml -->
<view class="container">
  <button bindtap="playAudio">播放</button>
  <button bindtap="pauseAudio">暂停</button>
  <button bindtap="stopAudio">停止</button>

  <audio
    id="myAudio"
    src="{{audioSrc}}"
    controls="{{true}}"
    loop="{{false}}"
    bindplay="onPlay"
    bindpause="onPause"
    bindended="onEnded"
  ></audio>
</view>

WXSS 文件

/* pages/audio/audio.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

button {
  margin: 10px;
}

JS 文件

// pages/audio/audio.js
Page({
  data: {
    audioSrc: "", // 音频文件的URL
  },

  onLoad: function () {
    // 设置音频文件的URL
    const fileID = "cloud://your-env-id/audio/your-audio-file.mp3"; // 替换为你的文件ID
    this.setData({
      audioSrc: fileID,
    });
  },

  // 播放音频
  playAudio: function () {
    const audioContext = wx.createAudioContext("myAudio");
    audioContext.play();
  },

  // 暂停音频
  pauseAudio: function () {
    const audioContext = wx.createAudioContext("myAudio");
    audioContext.pause();
  },

  // 停止音频
  stopAudio: function () {
    const audioContext = wx.createAudioContext("myAudio");
    audioContext.stop();
  },

  // 音频开始播放时触发
  onPlay: function () {
    console.log("音频开始播放");
  },

  // 音频暂停时触发
  onPause: function () {
    console.log("音频暂停");
  },

  // 音频播放结束时触发
  onEnded: function () {
    console.log("音频播放结束");
  },
});

3. 使用 wx.createInnerAudioContext() 播放音频

WXML 文件

<!-- pages/audio/audio.wxml -->
<view class="container">
  <button bindtap="playAudio">播放</button>
  <button bindtap="pauseAudio">暂停</button>
  <button bindtap="stopAudio">停止</button>
</view>

WXSS 文件

/* pages/audio/audio.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

button {
  margin: 10px;
}

JS 文件

// pages/audio/audio.js
Page({
  data: {
    audioContext: null,
  },

  onLoad: function () {
    // 创建音频上下文
    this.data.audioContext = wx.createInnerAudioContext();
    const fileID = "cloud://your-env-id/audio/your-audio-file.mp3"; // 替换为你的文件ID
    this.data.audioContext.src = fileID;

    // 监听音频事件
    this.data.audioContext.onPlay(() => {
      console.log("音频开始播放");
    });

    this.data.audioContext.onPause(() => {
      console.log("音频暂停");
    });

    this.data.audioContext.onStop(() => {
      console.log("音频停止");
    });

    this.data.audioContext.onEnded(() => {
      console.log("音频播放结束");
    });

    this.data.audioContext.onError((res) => {
      console.error("音频错误", res);
    });
  },

  // 播放音频
  playAudio: function () {
    this.data.audioContext.play();
  },

  // 暂停音频
  pauseAudio: function () {
    this.data.audioContext.pause();
  },

  // 停止音频
  stopAudio: function () {
    this.data.audioContext.stop();
  },
});

总结

通过上述两种方法，你可以在微信小程序中直接播放存储在云存储中的音频文件。使用 <audio> 组件适合简单的播放需求，并且可以显示内置的播放控件。而使用 wx.createInnerAudioContext() 则提供了更多的控制选项和灵活性，适合更复杂的音频播放场景。

如果你有更多具体的需求或遇到问题，请告诉我，我可以提供进一步的帮助。